<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" href="iconfont/iconfont.css" />
    <meta name="viewport" content="width=device-width" />
    <title>NCRE2</title>
    <style>
        .page-content{
            width:100%;
            min-height: 100vh;
        }
        .page-top{
            width: 100%;
            background-color:#04548c;
            height:auto;
            display: flex;
            flex-direction: column;
        }
        .nav-list{
            width: 70%;
            margin:10px auto;
            display: flex;
            justify-content: space-around;
        }
        .nav-list .nav-item{
            color:#fff;
        }
        .nav-list .nav-item.actived{
            color:#fff;
            font-size:110%;
            font-weight: 600;
            border-bottom:2px solid #fff;
        }

        .top3-box{
            width:100%;
            display: flex;
            justify-content: space-around;
            margin-top:52px;
        }
        .top3-box .box-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        .top3-box .box-item .touxiang{
            border-radius: 50%;
            font-size: 64px;
            color: #fff;
            border:1px solid #fff;
        }
        .top3-box .box-item .item-name{
            color: #fff;
            margin-top:5px;
        }
        .top3-box .box-item.top1{
            position: relative;
            top:-32px;
        }
        .box-item .flag{
            position: absolute;
            color:#fff;
            font-size:32px;
            right: -15px;
            top:-10px;
        }
        .top1 .flag{
            color:rgba(255,215,0,1);
            top:-26px;
            left:16px;
        }
        .top2 .flag{
            color:rgba(200,200,200,1);
        }
        .top3 .flag{
            color:rgba(255,110,51,1);
        }
        .page-bottom{
            width:100%;
        }

        .rank-label{
            padding-left:5px;
            border-left:4px solid #04548c;
            margin-top:10px;
        }
        .rank-list{
            display: flex;
            flex-direction: column;
        }
        .rank-list .rank-item{
            display: flex;
            margin:0px auto;
            width:calc(100% - 30px);

            border-bottom: 1px solid rgba(200,200,200,0.3);
            padding: 5px 10px;
            align-items: center;
        }
        .rank-list .rank-item .number{
            font-size:24px;
            width:32px;
            height:32px;
            line-height: 32px;
            text-align: center;
            color:#999;
            border-radius: 50%;
            border:1px solid #eee;
        }
        .rank-list .rank-item .touxiang{
            font-size: 32px;
            color:rgba(35,83,136,0.6);
            margin-left:10px;
        }
        .rank-list .rank-item .rank-text{
            margin-left:10px;
            flex: 1;
        }
        .mine .number{
            font-size:16px !important;
        }
        .rank-item.actived{
            background-color: rgba(35,83,136,0.1);
            font-size: 110%;
            font-weight:600;
        }
        .rank-item.actived .number{
            color:#000;
        }
    </style>
</head>
<body>
    <div class="page-content">
        <div class="page-top">
            <div class="nav-list">
                <div class="nav-item actived">学霸榜</div>
                <div class="nav-item">勤奋榜</div>
                <div class="nav-item">辛勤榜</div>
            </div>
            <div class="top3-box">
                <div class="box-item top2">
                    <div class="touxiang iconfont icon-touxiang"></div>
                    <div class="flag iconfont icon-jiangpai-yajun-F"></div>
                    <div class="item-name">第二名</div>
                </div>
                <div class="box-item top1">
                    <div class="touxiang iconfont icon-touxiang"></div>
                    <div class="flag iconfont icon-huangguan"></div>
                    <div class="item-name">第一名</div>
                </div>
                <div class="box-item top3">
                    <div class="touxiang iconfont icon-touxiang"></div>
                    <div class="flag iconfont icon-jiangpai-jijun-F"></div>
                    <div class="item-name">第三名</div>
                </div>
            </div>
        </div>
        <div class="page-bottom">
            <div class="my-position">
                <div class="rank-label">我的排名</div>
                <div class="rank-list">
                    <div class="mine rank-item">
                        <div class="number">10+</div>
                        <div class="touxiang iconfont icon-touxiang"></div>
                        <div class="rank-text">这是我的昵称</div>
                    </div>
                </div>
            </div>
            <div class="rank-box">
                <div class="rank-label">前十名榜单</div>
                <div class="rank-list">
                    <div class="rank-item">
                        <div class="number iconfont icon-shuzi1"></div>
                        <div class="touxiang iconfont icon-touxiang"></div>
                        <div class="rank-text">第一名用户</div>
                        <div class="rank-value">95.23%</div>
                    </div>

                    <div class="rank-item">
                        <div class="number iconfont icon-shuzi2"></div>
                        <div class="touxiang iconfont icon-touxiang"></div>
                        <div class="rank-text">第二名用户</div>
                        <div class="rank-value">86%</div>
                    </div>

                    <div class="rank-item actived">
                        <div class="number iconfont icon-shuzi3"></div>
                        <div class="touxiang iconfont icon-touxiang"></div>
                        <div class="rank-text">第三名用户</div>
                        <div class="rank-value">71.69%</div>
                    </div>

                    <div class="rank-item">
                        <div class="number iconfont icon-shuzi4"></div>
                        <div class="touxiang iconfont icon-touxiang"></div>
                        <div class="rank-text">第四名用户</div>
                        <div class="rank-value">69%</div>
                    </div>

                    <div class="rank-item">
                        <div class="number iconfont icon-shuzi5"></div>
                        <div class="touxiang iconfont icon-touxiang"></div>
                        <div class="rank-text">第五名用户</div>
                        <div class="rank-value">62.21%</div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>